<template>
  <el-form :model="form">
    <pro-layout-contaner :gutter="10">
      <el-card
        :span="12"
        header="结果1"
        shadow="hover"
        :bodyStyle="{ 'min-height': '450px' }"
      >
        <pro-online-render :key="key" :vjson="vjsonObjec"></pro-online-render>
      </el-card>
      <el-card
        :span="12"
        header="Vjson协议"
        shadow="hover"
        :bodyStyle="{ 'min-height': '450px' }"
      >
        <pro-input
          :rows="20"
          class="vjson-editor"
          uiType="textarea"
          v-model="form.hellowordJson"
        />
      </el-card>
    </pro-layout-contaner>
  </el-form>
</template>
<script>
import { renderPage } from "./render.js";
export default {
  computed: {
    vjsonObjec() {
      try {
        console.log(this.key);
        return JSON.parse(this.form.hellowordJson);
      } catch (e) {
        console.log(this.key);
        return {
          templates: {
            tag: "div",
            style: {
              color: "red",
              "font-size": "18px",
            },
            slots: {
              default: "渲染错误!!!",
            },
          },
        };
      }
    },
  },
  watch: {
    "form.hellowordJson": function () {
      this.key++;
    },
  },
  data() {
    return {
      key: 1,
      form: {
        hellowordJson: JSON.stringify(
          {
	"dataSources": [{
		"name": "dataTree",
		"target": "dddddd",
		":fieldMap": {
			"label": "text"
		}
	}],
	"methods": {
		"doHandle": "this.$alert('这是内容')",
               "dddddd":"return [{'id':'11111','label':'一级 1','text':'一级 1-text','children':[{'id':'1111-22222','text':'二级 1-1-text','label':'二级 1-1'}]},{'id':'22222','label':'一级 2','text':'一级 2-text'}]"
	},
	"templates": {
		"tag": "div",
		"style": {
			"color": "red",
			"font-size": "18px"
		},
		"slots": {
			"default": ["hellword mars-pro online render", {
				"tag": "pro-action",
				"props": {
					"text": "我是按钮",
					"shouldConfirmTxt": "你确定该操作吗?",
					"icon": "el-icon-edit",
					"type": "primary"
				},
				"on": {
					"@handler": "doHandle"
				}
			}, {
				"tag": "div",
				"slots": {
					"default": {
						"tag": "pro-data-tree",
						"props": {
							":dataSource": "dataTree"
						}
					}
				}
			}]
		}
	}
},
          null,
          " "
        ),
      },
    };
  },
};
</script>
<style lang="scss">
.vjson-editor {
  .el-textarea__inner {
    background: #766f6f;
    color: white;
  }
}
</style>
